<script type="text/javascript">


    $(document).ready(function () {
        //var theme = getDemoTheme();
        var theme = 'custom';
        var editrow = 1;
        var isEdit =false;
        var getAdapter = function () {
            // prepare the data
            var data =  <?php echo  $view_data ?>;
            var source =
            {
                localdata: data,
                datatype: "json",
                datafields:
                [
                    { name: 'productName', type: 'string' },
                    { name: 'quantityPerUnit', type: 'string' }
                 ],
                updaterow: function (rowid, rowdata, commit) {
                    // synchronize with the server - send update command
                    // call commit with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failed.
                commit(true);
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            return dataAdapter;
        }
      
        //createElements(theme);
        
        // initialize the input fields.
        $("#productName").addClass('jqx-input');
        $("#quantityPerUnit").addClass('jqx-input');
        $("#productName").addClass('jqx-rc-all');
        $("#quantityPerUnit").addClass('jqx-rc-all');

        $("#productName").width(150);
        $("#productName").height(25);
        $("#quantityPerUnit").width(150);
        $("#quantityPerUnit").height(25);
       
        if (theme.length > 0) {
            $("#productName").addClass('jqx-input-' + theme);
            $("#quantityPerUnit").addClass('jqx-input-' + theme);
            $("#productName").addClass('jqx-rc-all-' + theme);
            $("#quantityPerUnit").addClass('jqx-rc-all-' + theme);
         }
        // initialize jqxGrid
        $("#jqxgrid").jqxGrid(
        {
            width: $(window).width()-40,
            height: $(window).height(),
            source: getAdapter(),
            theme: theme,
            showstatusbar: true,
            sortable: true,
            pageable: true,
            autoheight: true,
            columnsresize: true,
            showfilterrow: true,
            filterable: true,
            pagesize: 14, 
            pagesizeoptions: ['14', '20', '50'],
            renderstatusbar: function (statusbar) {
                // appends buttons to the status bar.
                var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
                var addButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='<?php echo base_url(); ?>images/add.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Add</span></div>");
                var editButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='<?php echo base_url(); ?>images/search.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Edit</span></div>");
                var deleteButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='<?php echo base_url(); ?>images/close.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Delete</span></div>");
                var reloadButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='<?php echo base_url(); ?>images/refresh.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Reload</span></div>");
                container.append(addButton);
                container.append(editButton);
                container.append(deleteButton);
                container.append(reloadButton);
                statusbar.append(container);
                addButton.jqxButton({ theme: theme, width: 65, height: 20 });
                editButton.jqxButton({ theme: theme, width: 65, height: 20 });
                deleteButton.jqxButton({ theme: theme, width: 65, height: 20 });
                reloadButton.jqxButton({ theme: theme, width: 65, height: 20 });
                // add new row.
                addButton.click(function (event) {
                	editrow = 1;
                	isEdit=false;
                    $("#productName").jqxInput({disabled: false });
                    $("#productName").val('');
                    $("#quantityPerUnit").val('');
                    var offset = $("#jqxgrid").offset();
                    var data=new Array();
                    $("#jqxCUForm").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60} });
                    // show the popup window.
                    $("#jqxCUForm").jqxWindow('show');
                       
                });
                editButton.click(function (event) {
                	var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
                	var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
                	if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                         var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
                         editrow = selectedrowindex;
                         isEdit=true;
                         var offset = $("#jqxgrid").offset();
                         $("#jqxCUForm").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60} });
                         var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
                         $("#productName").val(dataRecord.productName);
                         $("#quantityPerUnit").val(dataRecord.quantityPerUnit);
                         $("#productName").jqxInput({disabled: true });
                         $("#jqxCUForm").jqxWindow('show');
                         
                    }
                });
               

             // initialize the popup window and buttons.
                $("#jqxCUForm").jqxWindow({ width:600, height:300,resizable: false, theme: theme, isModal: true, autoOpen: false, modalOpacity: 0.2 });
                $("#Close").jqxButton({ theme: theme ,width: 65, height: 25});
                $("#Close").click(function () {
                  	 $.ajax({
							url : "<?php echo site_url('product_ctrl/Refresh')?>",
							type : 'POST',
							success: function(html){
								 $("#content_body").html(html);
							}
					  });
                  	 $("#jqxCUForm").jqxWindow('hide');
                });
                
                $("#Save").jqxButton({ theme: theme ,width: 65, height: 25});
                $("#Save").click(function () {
                	if (isEdit) {
                		 if (editrow >= 0) {
                             var row = { productName: $("#productName").val(), quantityPerUnit: $("#quantityPerUnit").val()
                             };
                             $('#jqxgrid').jqxGrid('updaterow', editrow, row);
                            
                             var form_data = {
     								 action:'E',
                                     product: $('#productName').val(),
                                     quantity: $('#quantityPerUnit').val(),
                                     ajax:1
                              };
     		
     						  $.ajax({
     								url : "<?php echo site_url('product_ctrl/Save')?>",
     								type : 'POST',
     								data : form_data,
     								success: function(html){
     									
     									$("#jqxCUForm").jqxWindow('hide');
     									
    								}
     						  });
                           }
                    } else {
                    	var row = { productName: $("#productName").val(), quantityPerUnit: $("#quantityPerUnit").val() };
						var form_data = {
								action:'A',
                                product: $('#productName').val(),
                                quantity: $('#quantityPerUnit').val(),
                                ajax:1
                         };
		
						  $.ajax({
								url : "<?php echo site_url('product_ctrl/Save')?>",
								type : 'POST',
								data : form_data,
								success: function(){
									//$('#show').html(msg),
									$('#productName').val(''),
		                            $('#quantityPerUnit').val('')
		                            $('#productName').focus();
		                            //  createElements(theme);
                                    //$("#jqxWidgetDialog").css('visibility', 'visible');
		                            //$('#eventWindow').jqxWindow('open');
								}
						  });

	                  }
                      
                });
                
                // delete selected row.
                deleteButton.click(function (event) {
                    var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
                    var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
                    if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                        var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
                        $("#jqxgrid").jqxGrid('deleterow', id);
                        
                        var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', selectedrowindex);
                    	var productName= dataRecord.productName;
                        var form_data = {
                                product: productName
                        };
                        $.ajax({
							url : "<?php echo site_url('product_ctrl/Delete')?>",
							type : 'POST',
							data : form_data,
							success: function(html){
								 $("#content_body").html(html);
							}
					  });
                       
                    }
                });
                // reload grid data.
                reloadButton.click(function (event) {
                	$("#jqxgrid").jqxGrid('clearfilters');
                	 $.ajax({
							url : "<?php echo site_url('product_ctrl/Refresh')?>",
							type : 'POST',
						    success: function(html){
						    	 $("#content_body").html(html);
							}
					  });
         	
                });
                            
            },
            columns: [
              { text: 'Product', datafield: 'productName', width: 300 },
              { text: 'Quantity', datafield: 'quantityPerUnit', width: 200, cellsalign: 'right', cellsformat: 'n2' }
            ]

            
        });

        $('#events').jqxPanel({ width:  $(window).width()-40, height: 50, theme: theme });
        $("#jqxgrid").on("pagechanged", function (event) {
            $("#eventslog").css('display', 'block');
            if ($("#events").find('.logged').length >= 5) {
                $("#events").jqxPanel('clearcontent');
            }
            var args = event.args;
            var eventData = "pagechanged <div>Page:" + args.pagenum + ", Page Size: " + args.pagesize + "</div>";
            $('#events').jqxPanel('prepend', '<div class="logged" style="margin-top: 5px;">' + eventData + '</div>');
            // get page information.
            var paginginformation = $("#jqxgrid").jqxGrid('getpaginginformation');
            $('#paginginfo').html("<div style='margin-top: 5px;'>Page:" + paginginformation.pagenum + ", Page Size: " + paginginformation.pagesize + ", Pages Count: " + paginginformation.pagescount + "</div>");
        });
        $("#jqxgrid").on("pagesizechanged", function (event) {
            $("#eventslog").css('display', 'block');
            $("#events").jqxPanel('clearcontent');
            var args = event.args;
            var eventData = "pagesizechanged <div>Page:" + args.pagenum + ", Page Size: " + args.pagesize + ", Old Page Size: " + args.oldpagesize + "</div>";
            $('#events').jqxPanel('prepend', '<div style="margin-top: 5px;">' + eventData + '</div>');
            // get page information.          
            var paginginformation = $("#jqxgrid").jqxGrid('getpaginginformation');
            $('#paginginfo').html("<div style='margin-top: 5px;'>Page:" + paginginformation.pagenum + ", Page Size: " + paginginformation.pagesize + ", Pages Count: " + paginginformation.pagescount + "</div>");
        });

        
    });

    function createElements(theme) {
        $('#eventWindow').jqxWindow({ maxHeight: 150, maxWidth: 280, minHeight: 30, minWidth: 250, height: 145, width: 270,
            theme: theme, resizable: false, isModal: true, modalOpacity: 0.3,
            okButton: $('#ok'),
            initContent: function () {
                $('#ok').jqxButton({ theme: theme, width: '65px' });
                $('#ok').focus();
            }
        });
       // $('#events').jqxPanel({ theme: theme, height: '250px', width: '450px' });
      
    }
    
</script>

 <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; ">
	 <div id="jqxgrid">  </div>
	 <div style="margin-top: 30px;">
	         <div id="cellbegineditevent"></div>
	         <div style="margin-top: 10px;" id="cellendeditevent"></div>
	 </div>
	
	   <form class="form" id="jqxCUForm"  style="font-size: 13px; font-family: Verdana; width: 1000px; height : 700px;">
		   <div>
		        Add/Edit Product
		   </div>
		   <div style="overflow: hidden;">
			   <table >
			        <tr>
			            <td align="left">Product Name :</td>
			            <td align="left"><input id="productName" /></td>
			        </tr>
			        <tr>
			        	<td align="left">Quantity :</td>
			            <td align="left"><input id="quantityPerUnit" /></td>
			        </tr>
			        <tr></tr>
			        <tr>
			        	<td></td>
						<td align="right"><input type="button" id="Save" value="Save"/> 
						<input type="button" id="Close" value="Close"/></td>      
			
					</tr>
			   </table>
	       </div>    
		</form>
	
	
	
		<div style="visibility: hidden;" id="jqxWidgetDialog">
         <div style="width: 100%; height: 650px; border: 0px solid #ccc; margin-top: 10px;"
            id="mainDialogContainer">

            <div id="eventWindow">
                <div>
                   <!-- <img width="14" height="14" src="../../images/help.png" alt="" /> -->
                    Property Management</div>
                <div>
                    <div>
                        Save Data Successfully
                    </div>
                    <div>
	                    <div style="float: right; margin-top: 15px;">
	                        <input type="button" id="ok" value="OK" style="margin-right: 10px" />
	                     </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
	
	
</div>

